<template>
  <view class="privateFlow">
    <view class="updateTitle" v-if="openFlow">
      <view class="updateImg">
        <image style="height: 131rpx;width: 131rpx;" src="../../static/image/join-sm-2.png" mode=""></image>
      </view>
      <view class="updetaImgTxt">您暂未上传私域微信群</view>
      <view class="nounBtn">
        <button class="nounTxt" @click="uploadImg">立即开启</button>
      </view>
    </view>
    <view class="hasBeenOpen" v-if="!openFlow">
      <image style="width: 476rpx; height: 620rpx;" :src="flowFrom.wxGroupImage" mode=""></image>
    </view>
    <view class="updateTxt">
      <view>受限于微信群二维码的7天内有效，</view>
      <view>为保证您发布的群二维码持续有效，</view>
      <view>请在上传后的第8天进行新群二维码的更换。</view>
    </view>
    <view class="uni-padding-wrap uni-common-mt" v-if="!openFlow">
      <button type="primary" @click="uploadImg">更换私域微信群</button>
    </view>
  </view>
</template>

<script>
import { userRankStore,updateWxGroupImage } from "@/service/privateFlow/privateFlow.service.js"
import { uploadFile } from '../../unit/common.js'
export default {
  data () {
    return {
      openFlow:true,
      flowFrom: {
        wxGroupImage: '',
        wxGroupImageId:''
      }
    }
  },
  onShow () {
    this.getUserRankStore();
  },
  methods: {
    uploadImg () { // 上传图片
      uploadFile({
        success: (res) => {
          this.flowFrom.wxGroupImage = res.data.url;
          this.flowFrom.wxGroupImageId = res.data.id;
          this.openFlow = false;
          updateWxGroupImage({wxGroupImageId:this.flowFrom.wxGroupImageId},res => {
            if (res.status == 0) {
            } else {
              
            } 
          })
        }
      });
    },
    getUserRankStore () {
      userRankStore({},res => {
        if (res.data && res.data.wxGroupImage) {
          this.openFlow = false;
          this.flowFrom.wxGroupImage = res.data.wxGroupImage;
        }else {
          this.openFlow = true;
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .privateFlow {
    min-height: calc(100vh - 55px);
    background-color: #FFFFFF;
    padding-top: 123rpx;
    .updateTitle {
      padding-top: 104rpx;
      margin: auto;
      width:485rpx;
      height:623rpx;
      background:rgba(250,250,250,1);
      position: relative;
      opacity:0.93;
      .updetaImgTxt {
        font-size:32rpx;
        font-weight:bold;
        color:rgba(153,153,153,1);
        line-height:36px;
        text-align: center;
        margin-top:70rpx;
      }
      .updateImg {
        text-align: center;
      }
      .nounBtn {
        margin: auto;
        width: 270rpx;
        height: 65rpx;
        margin-top: 79rpx;
        .nounTxt {
          background-color: #434343;
          color: #F6DA99;
          font-size:30rpx;
          font-weight:500;
        }
      }
    }

    .updateTxt {
      font-size:28rpx;
      font-family:PingFang SC;
      font-weight:bold;
      color:rgba(153,153,153,1);
      line-height:49rpx;
      text-align: center;
      margin-top: 108rpx;
    }
    .hasBeenOpen {
      width: 476rpx;
      height: 620rpx;
      margin: auto;
      // background-color: #0062CC;
    }
    /* 下面的button按钮 */
    .uni-common-mt button {
      width: 687rpx;
      height: 70rpx;
      background: #434343;
      font-size:30rpx;
      font-weight: 500;
      color: rgba(246, 218, 153, 1);
      margin:21rpx auto;
    }
    .uni-common-mt{
      width: 100%;
      position:fixed;
      height: 112rpx;
      bottom: 0;
      background-color: #FFFFFF;
      border-top:2rpx solid #E1E1E1;
    }
  }
</style>
